<template>
  <div id="app">
    <el-row :gutter="20" style="height: 100%;">
      <!-- 左侧部门树 -->
      <el-col :span="4" :xs="24" style="height: 100%;">
        <ContentWrap class="h-full">
          <DeptTree />
        </ContentWrap>
      </el-col>
      <el-col :span="20" :xs="24" style="height: 100%;">
        <ContentWrap>
          <!--  添加 ref="tableWrap" -->
          <div ref="tableWrap" style="overflow-y: auto; max-height: 100%;">
            <el-table
              :data="list"
              style="width: 100%;"
            >
              <el-table-column label="用户编号" align="center" key="id" prop="id" />
              <el-table-column
                label="用户名称"
                align="center"
                prop="username"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="用户昵称"
                align="center"
                prop="nickname"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="部门"
                align="center"
                key="deptName"
                prop="deptName"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
            </el-table>
          </div>
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
          />
        </ContentWrap>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import DeptTree from './DeptTree.vue'

defineOptions({ name: 'Group' })
const total = ref(0) // 列表的总页数
const list = ref([
]) // 列表的数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  username: undefined,
  mobile: undefined,
  status: undefined,
  deptId: undefined,
  createTime: []
})
</script>

<style scoped>
#app {
  height: 86vh;
  overflow: hidden;
}
</style>
